<template>
  <div class="orderdet">
    <div class="room bg_fff">
      <div class="tit pd20 bor_b fz28">
        <img src="../../assets/image/shop.png"
             width="20">
        住宿
      </div>
      <div class="con">
        <div class="flex between info pd20">
          <img :src="room.file | imgUrl"
               class="bora_10 mr20"
               width="60"
               height="60">
          <div class="room_ifo">
            <p class="fz28 flex between"><span>{{room&&room.category}}</span> <span class="fz20">￥{{room&&room.price}}元</span></p>
            <p class="col_999">{{date&&date[0]}}~{{date&&date[1]}}</p>
            <p class="col_999">共{{roomOrderDetail&&roomOrderDetail.days}}晚</p>
          </div>
        </div>
      </div>
    </div>
    <div class=" bor_t mtb20">
      <group label-width="6em"
             label-margin-right="1em"
             label-align="left"
             gutter='0'>
        <!-- <x-input title="姓名"
                 v-model="user.realName"
                 placeholder="姓名"
                 required></x-input> -->
        <cell title="姓名"
              v-model="user.realName"
              value-align="left"></cell>
        <cell title="手机号"
              v-model="user.userMobile"
              value-align="left"></cell>
        <x-input title="备注"
                 v-model="remark"
                 placeholder="请填写备注"></x-input>
      </group>
    </div>

    <div class="bor_t mtb20">
      <group label-width="6em"
             label-margin-right="1em"
             label-align="left"
             gutter='0'>
        <cell title="订单金额"
              value-align="left">￥{{roomOrderDetail&&roomOrderDetail.amount}} 元</cell>
        <cell title="会员卡号"
              value-align="left">{{user.cardNumber}}</cell>
        <cell title="剩余次数"
              value-align="left">{{user.residueTimes}}次</cell>
        <cell title="本次消耗"
              value-align="left">{{roomOrderDetail&&roomOrderDetail.days}}次</cell>

      </group>
    </div>
    <div class="fixbtn flex"
         @click="submit">
      下单
    </div>
    <toast v-model="toastshow"
           type="text"
           width="200px"
           position="moddle">{{mesg}}</toast>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as API from '../../api'
import { Group, XInput, Cell, Toast } from 'vux'
import { log } from 'util'
export default {
  components: {
    Group, XInput, Cell, Toast
  },
  data () {
    return {
      user: '',
      date: [],
      roomOrderDetail: '',
      tel: '',
      remark: '',
      card: '',
      mesg: '',
      toastshow: false,
      dialogshow: false,
      room: '',
      confirmshow: false,
      valuation: '', orderId: ''
    }
  },
  created () {
    console.log(localStorage.getItem('sign'));
    const payBackOrderId = localStorage.getItem('sign')
    if (payBackOrderId) {
      this.$router.push({ path: '/orderdet', query: { orderId: payBackOrderId } })
      localStorage.removeItem("sign");
    }
    this.date = this.$route.params.date || this.order.date
    this.roomOrderDetail = this.$route.params.roomOrderDetail || this.order.roomOrderDetail
    this.$http.get(API.roomDetail, {      params: {
        roomId: this.$route.params.roomId || this.order.roomId
      }    }).then(res => {
      this.room = res.data
    }).catch(err => {
      console.log(err)
    })
    this.$http.get(API.user, {
      params: {
        openId: this.userInfo.openId
      }    }).then(res => {
      this.user = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  computed: {
    ...mapGetters(['userInfo', 'order'])
  },
  methods: {
    submit () {
      if (this.user && this.room) {
        this.$http.get(API.submitOrder, {          params: {
            openId: this.user.openId,
            roomId: this.room.id,
            startTime: this.date[0],
            endTime: this.date[1],
            remark: this.remark,
            checkInName: this.user.realName,
            checkInMobile: this.user.userMobile
          }        }).then(res => {
          if (res.data.code === 0) {
            this.orderId = res.data.msg
            console.log(res.data)
            this.$router.push({ path: '/pay', query: { orderId: this.orderId, orderTotal: this.roomOrderDetail.amount, days: this.roomOrderDetail.days, isOrder: 1 } })
          } if (res.data.code === 500) {
            this.toastshow = true,
              this.mesg = res.data.msg
          }
        }).catch(err => {
          this.toastshow = true
          this.mesg = '系统繁忙，请重试'
          this.$router.go(-1)
          console.log(err)
        })
      }

      // }
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
.room {
  @extend .bg_fff;
  .con {
    padding: 20px;
    .info {
      .room_ifo {
        width: 80%;
      }
    }
  }
}
.infos {
  @extend .bor_t;
  @extend .col_bbb;
  @extend .mtb20;
  @extend .bg_fff;
  padding: 20px 40px;
  div {
    line-height: 60px;
    span:first-child {
      width: 30%;
    }
  }
}
.card {
  padding: 20px;
  border-radius: 10px;

  p {
    margin: 5px 0;
    color: #999;
    &:first-child {
      text-align: right;
      width: 30%;
      font-size: 30px;
      color: #000;
      margin-right: 30px;
    }
  }
}
.dialog {
  font-size: 28px;

  .header {
    font-size: 30px;
    background-color: #fafafa;
    padding: 30px;
    font-weight: bold;
  }

  .close {
    padding: 10px;
    span {
      font-size: 50px;
      color: #ccc;
    }
  }
  .confirm {
    height: 90px;
    width: 100%;
    background: linear-gradient(
        227deg,
        rgb(64, 185, 255) 0%,
        rgb(66, 133, 246) 100%
      )
      rgb(102, 102, 102);
    color: #fff;
    font-size: 30px;
  }
}
</style>
